function Snake(ele) {

    this.ele = ele
    
    this.len = 20
   
    this.snakeObj = [
      { x: 6, y :2, color:'pink', ele:null},  
      { x: 5, y :2, color:'black', ele:null}, 
      { x: 4, y :2, color:'blue', ele:null}, 
      { x: 3, y :2, color:'pink', ele:null},  
      { x: 2, y :2, color:'black', ele:null}, 
      { x: 1, y :2, color:'blue', ele:null}  
    ]
    this.direction = 'right'
}

Snake.prototype.remove = function() {

    
    for (let i = 0; i<this.snakeObj.length; i++) 
    {
       
        if (this.snakeObj[i].ele)
        {  
            this.ele.removeChild(this.snakeObj[i].ele)
        }
    }
}

Snake.prototype.create = function() 
{

    this.remove()

    for (let i = 0; i<this.snakeObj.length; i++) 
    {

        let divObj = document.createElement('div')
        divObj.style.width = this.len + 'px'
        divObj.style.height = this.len + 'px'
        divObj.style.position = 'absolute'
        divObj.style.left =  this.snakeObj[i].x*this.len+'px'
        divObj.style.top =  this.snakeObj[i].y *this.len+'px'
        divObj.style.background = this.snakeObj[i].color
        this.snakeObj[i].ele = divObj
        this.ele.appendChild(divObj)
    }
}


Snake.prototype.move = function() {

    for (let i = this.snakeObj.length - 1; i>0; i--) {
        this.snakeObj[i].x = this.snakeObj[i-1].x
        this.snakeObj[i].y = this.snakeObj[i-1].y
    }

    switch (this.direction) {
        case 'top':
            this.snakeObj[0].y -= 1
            break;
        case 'bottom':
            this.snakeObj[0].y += 1
            break;
        case 'left':
            this.snakeObj[0].x -= 1
            break;
        case 'right':
            this.snakeObj[0].x += 1
            break;
    }

    this.create()
}